<template>
  <div class="customer-management">
    <!-- 搜索|新增 -->
    <div class="set-parameters">
      <el-input
        v-model="adminName"
        size="small"
        placeholder="请输入管理员名称"
        clearable
        maxlength="30"
        show-word-limit
        style="width: 220px"
      ></el-input>
      <el-input
        v-model="customerName"
        class="customer-name"
        size="small"
        placeholder="请输入客户名称"
        clearable
        maxlength="30"
        show-word-limit
        style="width: 220px"
      ></el-input>
      <el-button type="primary" size="small" @click="queryData">查询</el-button>
      <el-button type="primary" size="small" @click="showDialog">添加</el-button>
    </div>

    <!-- 信息展示 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="suppliername" label="客户名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="admin" label="管理员账号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="dname" label="状态" header-align="center" align="center" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 1" style="color: #67c23a">正常</span>
          <span v-else style="color: #e6a23c">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="account_num" label="最大账号数量" header-align="center" align="center"></el-table-column>
      <el-table-column prop="device_num" label="最大设备数量" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="contact" label="联系人" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column prop="phone" label="联系人电话" header-align="center" align="center"></el-table-column> -->
      <el-table-column prop="validity" label="服务期限" header-align="center" align="center"></el-table-column>
      <!-- <el-table-column prop="description" label="备注信息" header-align="center" align="center"></el-table-column> -->
      <!-- <el-table-column label="创建时间" header-align="center" align="center">
        <template slot-scope="scope">
          <span v-text="$options.filters.transformTime2Minute(scope.row.createTime)"></span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" header-align="center" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" style="background-color: #ff9f00; color: #ffffff" type="warning" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="pageNo"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog :modal="false" :title="dialogTitle" :visible.sync="dialogVisible">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="客户名称" :label-width="formLabelWidth" prop="suppliername">
          <el-input
            v-model="form.suppliername"
            placeholder="请输入账号名称"
            clearable
            maxlength="30"
            show-word-limit
            autocomplete="off"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item label="最大账号数量" :label-width="formLabelWidth" prop="account_num">
          <el-input-number
            v-model="form.account_num"
            :min="1"
            :max="10000"
            label="请设置最大账号数量"
            style="width: 280px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="最大设备数量" :label-width="formLabelWidth" prop="device_num">
          <el-input-number
            v-model="form.device_num"
            :min="1"
            :max="10000"
            label="请设置最大账号数量"
            style="width: 280px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="服务期限" :label-width="formLabelWidth" prop="validity">
          <el-date-picker
            v-model="form.validity"
            style="width: 280px"
            type="date"
            placeholder="选择服务期限"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="客户状态" :label-width="formLabelWidth" prop="state">
          <el-select v-model="form.state" placeholder="请选择阅读状态" filterable clearable style="width: 280px">
            <el-option v-for="cs in customerStates" :key="cs.id" :label="cs.label" :value="cs.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员账号" :label-width="formLabelWidth" prop="admin">
          <el-input
            v-model="form.admin"
            placeholder="请输入管理员账号"
            clearable
            maxlength="30"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.contact"
            placeholder="请输入昵称"
            clearable
            maxlength="30"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" :label-width="formLabelWidth">
          <el-input
            v-model="form.phone"
            placeholder="请输入昵称"
            clearable
            maxlength="30"
            show-word-limit
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注信息" :label-width="formLabelWidth">
          <el-input
            v-model="form.description"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 3 }"
            placeholder="请输入备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrAddAccount">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryCustomers, addCustomer, deleteCustomers, updateCustomer } from '@/api/httpApiAdmin'

export default {
  name: 'CustomerManagement',
  data() {
    const validateName = (rule, value, callback) => {
      const reg = /^[\S\u4e00-\u9fa5a-z0-9_-]{1,16}$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('账号必须由1-16个汉字、英文、数字、下划线、中划线组成'))
      }
    }
    return {
      tableData: [], // 表格中的数据
      adminName: '', // 管理员名称
      customerName: '', // 客户名称
      customerStates: [
        {
          id: 'customerStates0',
          value: 1,
          label: '正常'
        },
        {
          id: 'customerStates1',
          value: 2,
          label: '禁用'
        }
      ], // 阅读状态列表
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        }
      }, // 时间期限
      pageNo: 1, // 第几页
      pageSize: 20, // 每页几个数据
      total: 0, // 总数

      dialogTitle: '添加客户',
      dialogVisible: false, // 显示dialog

      formLabelWidth: '120px',
      form: {
        id: '', // id
        suppliername: '', // 客户名称
        account_num: '', // 最大账号数量
        device_num: '', // 最大设备数量
        validity: '', // 服务期限
        state: '', // 客户状态
        admin: '', // 管理员账号
        contact: '', // 联系人姓名
        phone: '', // 联系人电话
        description: '' // 备注信息
      }, // 表单
      rules: {
        suppliername: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validateName, trigger: 'blur' }
        ],
        account_num: [{ required: true, message: '请设置最大账号数量', trigger: 'blur' }],
        device_num: [{ required: true, message: '请设置最大账号数量', trigger: 'blur' }],
        validity: [{ required: true, message: '选择服务期限', trigger: 'blur' }],
        state: [{ required: true, message: '请选择阅读状态', trigger: 'blur' }],
        admin: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }]
      } // 表单验证
    }
  },
  computed: {
    ...mapState({
      adminInfo: 'adminInfo'
    })
  },
  mounted() {
    this.queryDataSilence()
  },
  methods: {
    // 分页查询数据
    queryData() {
      queryCustomers(this.customerName, this.adminName, this.pageNo, this.pageSize).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.rows || []
          this.total = res.data.records || 0
          this.$message({
            type: 'success',
            message: '查询成功！',
            duration: 1000
          })
        }
      })
    },
    queryDataSilence() {
      queryCustomers(this.customerName, this.adminName, this.pageNo, this.pageSize).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.rows || []
          this.total = res.data.records || 0
        }
      })
    },
    // 修改pageSize
    handleSizeChange(val) {
      if (this.pageSize === val) return
      this.pageSize = val
      this.queryData()
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.pageNo = val
      this.queryData()
    },
    // 显示dialog
    showDialog() {
      this.resetForm()
      this.dialogTitle = '添加客户'
      this.dialogVisible = true
    },
    // 修改或新建部门
    updateOrAddAccount() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          const { id, suppliername, account_num, device_num, state, admin, contact, phone, description } = this.form
          const validity = this.form.validity
          if (this.dialogTitle === '添加客户') {
            const year = validity.getFullYear()
            let month = validity.getMonth() + 1
            if (month < 10) {
              month = '0' + month
            }
            const day = validity.getDate() < 10 ? '0' + validity.getDate() : validity.getDate()
            const validityTime = year + '-' + month + '-' + day
            addCustomer(
              suppliername,
              account_num,
              device_num,
              validityTime,
              state,
              admin,
              contact,
              phone,
              description
            ).then((res) => {
              if (res.code === 0) {
                this.queryDataSilence()
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: '添加客户成功!',
                  duration: 1000
                })
              }
            })
          } else {
            updateCustomer(
              id,
              suppliername,
              account_num,
              device_num,
              validity,
              state,
              admin,
              contact,
              phone,
              description
            ).then((res) => {
              if (res.code === 0) {
                this.queryDataSilence()
                this.dialogVisible = false
                this.$message({
                  type: 'success',
                  message: '更新成功!',
                  duration: 1000
                })
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm() {
      this.form = {
        id: '',
        suppliername: '',
        account_num: '',
        device_num: '',
        validity: '',
        state: '',
        admin: '',
        contact: '',
        phone: '',
        description: ''
      }
    },
    // 显示编辑dialog
    handleEdit(index, row) {
      for (const key in row) {
        if (row.hasOwnProperty(key)) {
          this.form[key] = row[key]
        }
      }
      this.dialogTitle = '编辑客户'
      this.dialogVisible = true
    },
    // 删除
    handleDelete(index, row) {
      this.$confirm('是否删除客服账号！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCustomers(row.id).then((res) => {
            if (res.code === 0) {
              const pn = Math.ceil((this.total - 1) / this.pageSize)
              if (this.pageNo > pn) {
                this.pageNo = pn
              }
              this.queryDataSilence()
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 1000
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消',
            duration: 1000
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.customer-management {
  height: 100%;
  display: flex;
  flex-direction: column;

  .set-parameters {
    padding: 10px 5px;
    display: flex;
    align-items: center;
    border-bottom: solid $border-color-1 2px;
    .customer-name,
    .el-button {
      margin-left: 20px;
    }
  }

  .el-pagination {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: solid 1px $border-color-1;
    background-color: white;
  }

  ::v-deep .el-dialog {
    width: 500px;
    .el-form {
      width: 400px;
    }
  }
}
</style>
